<template>
  <!--全部查询-->
  <!--div形式的全部查询条件 border: 1px solid rgb(207, 225, 243); min-height: 33px; width: 340px;-->
  <el-drawer
    title="查询条件"
    :with-header="false"
    v-model="state.showMoreFind"
    direction="ttb"
    custom-class="demo-drawer"
    ref="drawer"
    size="400px"
  >
    <el-scrollbar style="height:350px;text-align: left;">
      <div style="float: left;margin: 5px; border: 1px solid rgb(207, 225, 243); min-height: 33px;"
        :style="'width:' + (state.findModel[ctrId].useKind === 17 ? 680 : 340) + 'px;'"
        v-for="(ctrId, index) in state.allFind"
        :key="'find_' + ctrId + '_'+ index"
      >
        <label
          style="width:80px;font-size:9pt;text-align: right;float: left;margin-left: 5px;margin-right: 5px;margin-top: 5px;"
        >
          {{state.itemMeta[ctrId].meta.label}}
        </label>
        <div :style="'width:' + (state.findModel[ctrId].useKind === 17 ? 630: 350) + 'px;padding-top:4px;'">
          <!--查询字段-->
          <find-item :columnId="ctrId"></find-item>
        </div>
      </div>
    </el-scrollbar>
  </el-drawer>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import { getFindState } from '../state/state-find'
  // 查询字段
  import findItem from './find-item.vue'

  /**
   * 以“抽屉”的形式显示所有的查询字段，div方式排列
   */
  export default defineComponent({
    name: 'nf-el-find-all-div',
    components: {
    },
    props: {
    },
    setup(props, context) {
      const state = getFindState()

      return {
        state
      }
    }
  })
</script>